<script lang="ts" setup>
interface Children {
    name: string,
    style?: '',
    vSharedElement?: string
}

withDefaults(
    defineProps<{
        childrenHasClass?:boolean
        children?: Children[]
    }>(),
    {
        childrenHasClass:true,
        children: () => [{ name: 'top' }, { name: 'bottom' }],
    }
);

</script>
<template lang="pug">
main
    div(v-for="child in children" v-shared-element:[`page-${child.vSharedElement||child.name}`]="{ includeChildren: false }" :style="child.style" :class="{'content-card':childrenHasClass}")
        slot(:name="child.name")
</template>
<style lang="scss" scoped>
main {
    position: relative;
    // height: 100%;
    .content-card {
        position: relative;
        background-color: #fff;
        box-shadow: 1px 1px 6px #eee;
        margin: 10px 0;
        border-radius: 10px;
        overflow: hidden;
        &:first-child {
            margin-top: 0;
        }
        &:last-child {
            margin-bottom: 0;
        }
    }
}
</style>